<template>
  <div class="yonghu">
    <div class="top">用户资料信息列表</div>
    <div class="bigbox">
      <!-- 点击弹框 -->
      <div class="con">
        <!-- <router-link> -->
        <el-row class="mb-4">
          <el-button type="primary" @click="router.push('/index/home/xhz/raise')">新增用户</el-button>
        </el-row>
        <!-- </router-link> -->
        <el-row class="mb-4">
          <el-button type="primary" @click="router.push('/index/home/xhz/empower')">用户授权</el-button>
        </el-row>
      </div>
      <div class="right">
        <!-- 搜索框 -->
        <input type="text" placeholder="请输入关键字" />
        <!-- 下拉框 -->
        <el-dropdown split-button type="primary" @click="handleClick">
          全部
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>用户编号</el-dropdown-item>
              <el-dropdown-item>员工姓名</el-dropdown-item>
              <el-dropdown-item>管理员分类</el-dropdown-item>
              <el-dropdown-item>部门名称</el-dropdown-item>
              <el-dropdown-item>创建日期</el-dropdown-item>
              <el-dropdown-item>更新日期</el-dropdown-item>
              <el-dropdown-item>授权状态</el-dropdown-item>
              <el-dropdown-item>职位名称</el-dropdown-item>
              <el-dropdown-item>职务级别</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 点击查询 -->
        <el-row class="mb-4">
          <el-button type="primary">查询</el-button>
        </el-row>
      </div>
    </div>
    <!-- 表单 -->
    <!-- <h1>{{tableData.list.length}}</h1> -->
    <el-table :data="tableData.list" height="420" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="name" label="用户名" width="120" />
      <el-table-column prop="Administrator" label="管理员分类" />
      <el-table-column prop="name" label="员工姓名" width="150" />
      <el-table-column prop="branch" label="部门名称" />
      <el-table-column prop="date" label="创建日期" width="150" />
      <el-table-column prop="state" label="授权状态" />
      <el-table-column prop="address" label="操作" width="150">
        <template #default="scope">
          <el-button 
            link
            type="primary"
            size="small"
            @click.prevent="editRow(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="deleteRow(scope.row)"
            >删除</el-button
          >
          <el-button @click="router.push('/index/home/xhz/check')"
            link
            type="primary"
            size="small"
            @click.prevent="check(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
var router =useRouter();
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert("button click");
};

import { onMounted, reactive } from "vue";
import { RouterLink, RouterView } from 'vue-router'
import axios from "axios";

//定义响应式数据
var tableData = reactive({ list: [] });

onMounted(() => {
  axios.get("/api/user/list").then((res) => {
    console.log(res.data.list);
    tableData.list = res.data.list;
  });
});

//定义函数
var deleteRow = (row) => {
  axios.post("/api/user/delete", { id: row.id }).then((res) => {
    console.log("delete", res.data);
    tableData.list = res.data.list;
  });
};
var editRow = (row) => {
  console.log(row);
  router.push( { path:'/index/home/xhz/redact', query:row })
  
};
var check=(row)=>{
  console.log(row);
  router.replace({path:'/index/home/xhz/check',query:row})
}
</script>

<style scoped>
.top {
  margin-left: 400px;
  font-size: 20px;
  margin-bottom: 30px;
}
.con {
  display: flex;
}
.mb-4 {
  margin-right: 30px;
}
.right {
  display: flex;
}
.bigbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
  height: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>